<template>
  <div class="content_box">
    <div class="list_box" v-if="list.length">
      <div v-for="(item,index) in list" :key="index" :class="item.status != 0?'box on':'box'">
        <img class="bj" src="/static/images/coupon_bj.png" alt="">
        <p class="label" v-if="item.couponType == 1">折扣券</p>
        <p class="label" v-if="item.couponType == 0">指定金额</p>
        <p class="label" v-if="item.couponType == 2">满减券</p>
        <div class="nr">
          <div class="left">
            <p class="price" v-if="item.couponType == 1">{{item.discount}}<span>折</span></p>
            <p class="price" v-if="item.couponType == 0"><span>￥</span>{{item.amount}}</p>
            <p class="price" v-if="item.couponType == 2"><span>￥</span>{{item.subtract}}</p>
            <p class="text">{{item.content}}</p>
            <!-- <p class="text" v-else>剩余20张</p> -->
          </div>
          <p class="line"></p>
          <div class="right">
            <div class="name_box">
              <div class="name">
                <p class="title" v-if="item.couponType == 1">折扣券</p>
                <p class="title" v-if="item.couponType == 0">指定金额</p>
                <p class="title" v-if="item.couponType == 2">满减券</p>
                <p class="time">有效期至{{item.endTime}}</p>
              </div>
            </div>
            <div class="jiesao_box">
              <p class="jiesao">{{item.remark}}</p>
              <p class="cz" @click="clickCz(item)">操作</p>
            </div>
          </div>
        </div>
        <img v-if="item.status == 1" class="guoqi" src="/static/images/stamp2.png" alt="">
      </div>
    </div>
    <div class="no_data" v-else>
      <img src="/static/images/no_sp.png" alt="">
      <p class="text">暂无优惠券</p>
    </div>

    <!-- 弹窗 -->
    <div class="pop_box">
      <van-popup position="bottom" :show="isAdmin" @close="closePop">
        <div class="box">
          <div class="title">
            <p>优惠券操作</p>
          </div>
          <div class="list">
            <p class="name">发放优惠券</p>
            <p class="icon" @click="toProvide">
              去发放
            </p>
          </div>
          <div class="list">
            <p class="name">编辑优惠券</p>
            <p class="icon" @click="toEdit(true)">
              编辑
            </p>
          </div>
          <div class="list" @click="del">
            <p class="name">删除优惠券</p>
            <p class="icon">
              删除
            </p>
          </div>
          <p class="line"></p>
          <p class="quxiao" @click="isAdmin = false">取消</p>
        </div>
      </van-popup>
    </div>
    <div class="anniu_box" :style="{paddingBottom:isIphoneXnum+'px'}">
      <div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
        <p class="anniu" @click="toEdit(false)"><van-icon name="plus" /> 新增优惠券</p>
      </div>
    </div>
  </div>
</template>
 
<script>
import {
  getCouponPage,
  delCoupon
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      loading:false,
      list:[],
      query:{
        size:10,
        current:1,
        storeId:''
      },
      isIphoneXnum:0,
      isAdmin:false,
      couponId:'',
    };
  },
  onShow() {
    this.getList(true)
  },

  methods: {

    // 关闭弹窗
    closePop(){
      this.isAdmin = false
    },

    // 操作-弹窗
    clickCz(item){
      this.isAdmin = true
      this.couponId = item.id
    },

    // 获取优惠券列表
    getList(state){
      this.$showLoading('加载中...')
      getCouponPage(this.query).then(res=>{
        if(res.statusCode == '00000'){
          if(this.query.current != 1 && !res.data.length){
            this.$toast('已经到底了~')
            return
          }
          if(state){
            this.query.current = 1
            this.list = []
          }
          res.data.records.map(item=>{
            item.selected = false
          })
          this.list = this.list.concat(res.data.records)
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }else{
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
          this.$toast(res.message)
        }
      })
    },

    // 选择优惠券
    onChange(item,index){
      // if(item.selected){
      //   this.list[index].selected = false
      // }else{
      //   this.list.map(res=>{
      //     res.selected = false
      //   })
      //   this.list[index].selected = true
      // }
      // console.log(this.msg)
    },

    // 跳转新增/编辑优惠券页面
    toEdit(state){
      this.isAdmin = false
      if(state){
        wx.navigateTo({
          url: `/pages/home/couponAdmin/edit/main?id=${this.couponId}&storeId=${this.query.storeId}`,
        });
        return
      }
      wx.navigateTo({
        url: `/pages/home/couponAdmin/edit/main?storeId=${this.query.storeId}`,
      });
    },

    // 删除优惠券
    del(){
      wx.showModal({
        title: "温馨提示",
        content: "是否删除该优惠券~",
        confirmText:'确认删除',
        success: (res)=>{
          if (res.confirm) {
            delCoupon({id:this.couponId}).then(res=>{
              if(res.statusCode == '00000'){
                this.isAdmin = false
                this.getList(true)
              }else{
                this.$toast(res.message)
              }
            })
          }
        },
      });
    },

    // 跳转去发放
    toProvide(){
      this.isAdmin = false
      wx.navigateTo({
        url: `/pages/home/couponAdmin/provide/main?storeId=${this.query.storeId}&couponId=${this.couponId}`,
      });
    },
  },
  onLoad(options) {
    this.query.storeId = options.storeId
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
  },
  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.query.current = 1
    this.query.size = 10
    this.getList(true)
  },
  // 上拉加载
  onReachBottom(){
    console.log('到底了')
    this.query.current += 1
    this.getList()
  },
  onHide() {},

  onUnload() {},
};
</script>

<style lang="scss" scoped>
.content_box{
  min-height: 100vh;
  background: #F8F9FA;
}
.list_box{
  padding-top: 24rpx;
  .box{
    height: 208rpx;
    margin:0 30rpx;
    position: relative;
    margin-bottom:20rpx;
    .guoqi{
      width: 120rpx;
      height: 120rpx;
      position: absolute;
      right:10rpx;
      top:10rpx;
    }
    .bj{
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      left:0;
      z-index: 0;
    }
    .bj1{
      width: 100%;
      height: 100%;
      position: absolute;
      top:15rpx;
      left:0;
      z-index: 1;
    }
    .label{
      position: absolute;
      top:0;
      left: 6rpx ;
      padding:0 16rpx;
      height: 40rpx;
      background: #1E68FF;
      z-index: 20;
      font-size:22rpx;
      color:#fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top-left-radius: 16rpx;
      border-bottom-right-radius: 16rpx;
      font-weight: 500;
    }
    .nr{
      position: relative;
      z-index: 30;
      display: flex;
      .left{
        width: 29%;
        height: 208rpx;
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        .price{
          display: flex;
          align-items: baseline;
          font-size:70rpx;
          font-weight: bold;
          color:#1E68FF;
          margin-top:20rpx;
          span{
            font-size:30rpx;
          }
        }
        .text{
          font-size:24rpx;
          color:#696B6E;
        }
      }  
      .line{
        width: 1rpx;
        height: 160rpx;
        border-right:1px dashed #E4E4E4;
        margin-top:22rpx;
      }
      .right{
        flex: 1;
        padding-left:24rpx;
        .name_box{
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-top:30rpx;
          margin-bottom:24rpx;
          .name{
            .title{
              color:#242526;
              font-size:32rpx;
              font-weight: 500;
              margin-bottom:12rpx;
            }
            .time{
              color:#666666;
              font-size:24rpx;
            }
          }
        }
        .jiesao_box{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .jiesao{
            color:#999999;
            font-size:22rpx;
            flex: 1;
          }
          .cz{
            width: 100rpx;
            height: 40rpx;
            background: #eee;
            border-radius: 50rpx;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color:#222;
            font-size:26rpx;
            margin-right:30rpx;
          }
        }
      }      
    }
    &.on{
      .label{
        color:#383838;
        background: #F6F6F8 ;
      }
      .price{
        color:#AEAFB0 !important;
      }
      .text{
        color:#B0B1B4 !important ;
      }
      .title{
        color:#8D8E90 !important;
      }
      .time{
        color:#AEAFB0 !important ;
      }
      .jiesao{
        color:#C8C8CA !important;
      }
    }
  }
}
.anniu_box{
  height: 150rpx;
  width: 100%;
  background: #fff;
  
  .box{
    position: fixed;
  bottom:0;
  left: 0;
  z-index: 100;
    width: 92%;
    height: 150rpx;
    line-height: 150rpx;
    padding:0 30rpx;
    background: #fff;
    display: flex;
    align-items: center;
    .anniu{
      box-shadow: 0rpx 10rpx 20rpx #CEDBFA;
      border:none;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: #1E68FF;
      border-radius: 100rpx;
      text-align: center;
      color: #fff;
      font-size: 30rpx;
    }
  }
}
.no_data{
  text-align: center;
  font-size:28rpx;
  color:#333;
  padding-top:150rpx;
  .text{
    font-weight: 500;
    color:#999;
  }
  img{
    width: 248rpx;
    height: 248rpx;
  }
}
.pop_box{
  /deep/ .van-popup {
    border-top-right-radius: 20rpx !important;
    border-top-left-radius: 20rpx !important;
  }
  .box{
    .title{
      height: 104rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color:#323233;
      font-size:34rpx;
      border-bottom:1px solid #f0f0f0;
      position: relative;
      .tb{
        position: absolute;
        right:30rpx;
      }
    }
    .list{
      height: 104rpx;
      border-bottom:1px solid #f5f5f5;
      padding:0 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name{
        font-size:32rpx;
        color:#323233;
      }
      .icon{
        width: 196rpx;
        height: 60rpx;
        display:flex;
        align-items: center;
        justify-content: center;
        border:1px solid #222;
        color:#222;
        font-size:28rpx;
        font-weight: 500;
        border-radius: 50rpx;
        &.on{
          opacity: 0.5;
        }
      }
      div{
        display: flex;
      }
      .tips{
        font-size:24rpx;
        color:red;
        margin-top:10rpx;
      }
      img{
        width: 32rpx;
        height: 32rpx;
        margin-right:10rpx;
      }
    }
    .line{
      width: 100%;
      height: 16rpx;
      background: #f8f8f8;
    }
    .quxiao{
      height: 100rpx;
      line-height: 100rpx;
      font-size:32rpx;
      color:#323233;
      text-align: center;
    }
  }
}
</style>
